<!DOCTYPE html>
<html>
  <head>
    <title>Vega Theme Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <script src="build/vega-themes.js"></script>
    <style>
      body {
        margin: 10px;
        font-size: 14px;
        font-family: sans-serif;
        position: relative;
      }
      #header {
        padding: 10px 0 20px;
        height: 20px;
      }
      #views {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
      }
      .view {
        flex: 0;
        margin-right: 5px;
        margin-bottom: 10px;
      }
      .view > canvas,
      .view > svg {
        border: 1px dashed #ccc;
      }
      .vega-bind {
        line-height: 18px;
        margin-bottom: 2px;
      }
      .vega-bind-name {
        display: inline-block;
        width: 100px;
      }
      .vega-bind input[type="range"] {
        width: 400px;
      }
      .vega-bind label {
        margin: 0 0.5em 0 2px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      Theme:
      <select id="themes">
        <option value="default">default</option>
        <option value="excel">excel</option>
        <option value="ggplot2">ggplot2</option>
        <option value="quartz">quartz</option>
        <option value="vox">vox</option>
        <option value="dark">dark</option>
        <option value="fivethirtyeight">fivethirtyeight</option>
        <option value="latimes">latimes</option>
        <option value="urbaninstitute">urbaninstitute</option>
        <option value="googlecharts">googlecharts</option>
      </select>
      &nbsp; Renderer:
      <select id="render">
        <option value="svg" selected>svg</option>
        <option value="canvas">canvas</option>
      </select>
      <br />
    </div>
    <div id="views"></div>
    <script>
      var files = [
        "bars.vg.json",
        "lines.vg.json",
        "scatter.vg.json",
        "stacked.vl.json",
        "area.vl.json",
        "heatmap.vl.json",
        "ramp.vl.json",
      ];
      var specs = [];

      var container = document.querySelector("#views"),
        loader = vega.loader(),
        renderType = "svg",
        theme = {};

      Promise.all(
        files.map(function (file) {
          var index = specs.length;
          specs.push(file);
          return loader.load(file).then(function (json) {
            specs[index] = JSON.parse(json);
          });
        })
      )
        .then(function () {
          var earlierChoosenTheme = url.searchParams.get("theme");
          var selectedGraph = url.searchParams.get("renderer");
          if (earlierChoosenTheme) {
            theme = vegaThemes[earlierChoosenTheme];
            themes.value = earlierChoosenTheme;
          }
          if (selectedGraph) {
            render.value = selectedGraph;
            renderType = selectedGraph;
          }

          refresh();
        })
        .catch(function (err) {
          console.error(err, err.stack);
        });

      var themes = document.querySelector("#themes");
      var currentLocation = window.location;
      var url = new URL(currentLocation);
      themes.addEventListener("change", function () {
        theme = vegaThemes[themes.options[themes.selectedIndex].value];
        url.searchParams.set("theme", `${themes.options[themes.selectedIndex].value}`);
        window.history.replaceState(null, null, url);
        refresh();
      });

      var render = document.querySelector("#render");
      render.addEventListener("change", function () {
        renderType = render.options[render.selectedIndex].value;
        url.searchParams.set("renderer", `${render.options[render.selectedIndex].value}`);
        window.history.replaceState(null, null, url);
        refresh();
      });

      function refresh() {
        container.innerHTML = "";
        setBackground(theme);
        specs.forEach(function (spec) {
          var el = document.createElement("div");
          el.setAttribute("class", "view");
          container.appendChild(el);
          vegaEmbed(el, spec, {
            renderer: renderType,
            config: theme,
            defaultStyle: true,
          });
        });
      }

      function setBackground(theme) {
        document.body.style.background = null;
        document.body.style.color = null;
        if (!theme) {
          return;
        }
        if ("background" in theme) {
          document.body.style.background = theme.background;
        }
        if ("title" in theme && "color" in theme.title) {
          document.body.style.color = theme.title.color;
        }
      }
    </script>
  </body>
</html>
